<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<title></title>
<style type="text/css">
    .ctviewContents {
/*       background: lightblue;*/
        width: 700px;
        margin: 70px auto ;
    }

    .ctviewContents label {
        width: 70px;
/*       background: lightcoral;*/
        text-align: right;
        font-weight: bold;
        display: inline-block;
        padding: 10px 10px 0 0;
        font-size:130%;
    }
    .ctviewContents li:first-child{
        padding-top:15px;
    }

    .review {
/*        background: lightblue;*/
        width: 700px;
        margin:0 auto;
        margin-top:-40px;
    }

    .hr {
        border:1px solid dimgray;
        margint-bottom:50px;
    }
  button{
        height: 32px;
        font-family: "나눔바른고딕";
    }
    .ct {
        width:700px;
        height:200px;
        border:1px solid dimgray;
        display: inline-block;
        /*보여지는 그대로 출력*/
        white-space: pre !important;
        /*강제줄바꿈*/
        word-wrap: break-word !important;
        /*본문영역의 넘치는 문자들을 넘치지 않도록 제어*/
        /*수평스크롤 숨김*/
        overflow-x: hidden;
        /*수직스크롤만 표시*/
        overflow-y: scroll;
        margin-top:10px;
    }
    table{
        width:700px;
        margin-top:-50px;
    }
    tr{
        border-bottom:1px solid dimgrey;
        height:50px;
    }
    td{
        height:20px;
    }
    #cmBtn {
        width:80px;
        height:90px;
    }

    #comments {
        width:500px;
        height:100px;
    }

    #cmfrm {
        height:100px;
    }

    #listBtn {
        margin-top:10px;
        text-align: center;
    }

    .ctInfo {
        border-radius: 15px 15px;
        background: darkgrey;
        height:250px;

    }
    .ctimage {
        background: white;
        margin:10px 10px;
        width: 250px;
        height: 230px;
        float: left;
    }

    .ctview {
        margin:70px 60px;
    }

    .h {
        margin-top:20px;
    }
</style>

<!-- contents -->
<div id="contents" class="row">

        <div class="contentsHeader">
            <span class="log">콘테스트</span>
            <span class="wel">&nbsp;&nbsp;&nbsp;자신의 노래를 뽐낼 수 있습니다.</span>
        </div>
    <div class="ctview">
        <div class="ctviewContents">
            <div class="ctInfo">
                <div class="ctimage"></div>
                <div class="if">
                    <ul>
                        <li><label>곡제목</label> <span>전설을 노래하다.dafdsfsdfasdfadfsdfs</span></li>
                        <li> <label>작성자</label> <span>안뇽</span></li>
                        <li> <label>등록일</label> <span>2014.11.16</span></li>
                        <li> <label>조회수</label> <span>24</span></li>
                        <li><label>파일</label><span>hi.mp3</span><span>재생</span></li>
                    </ul>
                </div>
                <div>
                    <label>좋아요</label> <span>5555</span>
                </div>
            </div>
            <div class="h">
                <div class="hr"></div>
            </div>
            <div>
                <span class="ct"></span>
            </div>
            <div class="button">
                <button type="button" id="listBtn">목록보기</button>
            </div>
        </div>
        <div class="review">
                <h3>리뷰</h3>
                <form id="cmfrm" class="well form-inline">
                    <label>작성자</label>
                    <textarea name="comments" id="comments"></textarea>
                    <a class="btn" id="cmBtn" >등록</a>
                </form>
                    <table >
                        <!--댓글-->
                        <thead head  style="border-bottom:3px solid  dimgrey;">
                        <tr>
                            <td colspan="2">
                            </td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td rowspan="2">
                                안뇽(작성자)
                            </td>
                            <td style="padding-left:30px;">
                                너무너무 잘 들었어요. 짱짱짱 !!! 최고!! (내용)
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-left:30px;">
                                2014.11.16(작성일)
                                <button type="button" id="reviewBtn">리뷰</button>
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="2">
                                안뇽(작성자)
                            </td>
                            <td style="padding-left:30px;">
                                너무너무 잘 들었어요. 짱짱짱 !!! 최고!! (내용)
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-left:30px;">
                                2014.11.16(작성일)
                                <button type="button">리뷰</button>
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="2">
                                안뇽(작성자)
                            </td>
                            <td style="padding-left:30px;">
                                너무너무 잘 들었어요. 짱짱짱 !!! 최고!! (내용)
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-left:30px;">
                                2014.11.16(작성일)
                                <button type="button">리뷰</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
        </div>
    </div>
</div>
